﻿<!DOCTYPE html>
<html>
<head>
  <title>KataBinaryClock</title>
  <style type="text/css">
    body
    {
      font-family: Verdana;
      font-size: 10px;
    }
    
    #tbClock {
      background-color: #333;
      color: #fff;
    }
    
    #tbClock td
    {
      height: 20px;
      width: 10px;
    }
    
    .ledOn
    {
      background-color: #008B8B;
    }
  </style>
  <script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
  <script src="KataBinaryClock.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      startTheClock();
    });

    // http://stackoverflow.com/questions/5865089/simple-javascript-loop-that-repeats-each-second
    function startTheClock() {
      core();
      setTimeout(startTheClock, 1000);
    }

    function core() {
      var binaryClock = new BinaryClock();
      var binaries = binaryClock.getBinaries(new Date());

      var prefixes = new Array('hh', 'hl', 'mh', 'ml', 'sh', 'sl');

      for (var i = 0; i < binaries.length; i++) {
        manageLeds(prefixes[i], binaries[i]);
      }
    }

    function manageLeds(prefix, binary) {
      // reset leds
      $('#' + prefix + '8').removeClass('ledOn');
      $('#' + prefix + '4').removeClass('ledOn');
      $('#' + prefix + '2').removeClass('ledOn');
      $('#' + prefix + '1').removeClass('ledOn');
      // set leds
      if (binary[0] == 1) {
        $('#' + prefix + '8').addClass('ledOn');
      }
      if (binary[1] == 1) {
        $('#' + prefix + '4').addClass('ledOn');
      }
      if (binary[2] == 1) {
        $('#' + prefix + '2').addClass('ledOn');
      }
      if (binary[3] == 1) {
        $('#' + prefix + '1').addClass('ledOn');
      }
    }
  </script>
</head>
<body>
  <div>
    <table id="tbClock">
      <tr>
        <td id="hh1">&nbsp;</td>
        <td id="hh2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>H</td>
      </tr>
      <tr>
        <td id="hl1">&nbsp;</td>
        <td id="hl2">&nbsp;</td>
        <td id="hl4">&nbsp;</td>
        <td id="hl8">&nbsp;</td>
        <td>H</td>
      </tr>
      <tr>
        <td id="mh1">&nbsp;</td>
        <td id="mh2">&nbsp;</td>
        <td id="mh4">&nbsp;</td>
        <td>&nbsp;</td>
        <td>m</td>
      </tr>
      <tr>
        <td id="ml1">&nbsp;</td>
        <td id="ml2">&nbsp;</td>
        <td id="ml4">&nbsp;</td>
        <td id="ml8">&nbsp;</td>
        <td>m</td>
      </tr>
      <tr>
        <td id="sh1">&nbsp;</td>
        <td id="sh2">&nbsp;</td>
        <td id="sh4">&nbsp;</td>
        <td>&nbsp;</td>
        <td>s</td>
      </tr>
      <tr>
        <td id="sl1">&nbsp;</td>
        <td id="sl2">&nbsp;</td>
        <td id="sl4">&nbsp;</td>
        <td id="sl8">&nbsp;</td>
        <td>s</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>8</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <span id="now"></span>
  </div>
</body>
</html>
